<template>
    <u-popup v-model="value" mode="right" width="100%">
        <view class="card-header">
            <view class="card-header-wrap">
                <view
                    class="card-header-bar"
                    :style="{ height: statusBarHeight + 'px' }"
                ></view>
                <view
                    class="u-relative u-border-bottom"
                    :style="[{ height: navbarHeight + 'px' }]"
                >
                    <u-icon
                        @click="$u.debounce(close, 500)"
                        name="close"
                        class="u-absolute"
                        :style="[headerStatusCloseIconStyle]"
                    ></u-icon>
                </view>
            </view>
            <view
                class="card-header-placeholder"
                :style="{
                    height: Number(navbarHeight) + statusBarHeight + 'px',
                }"
            ></view>
        </view>
        <view class="card-body">
            <view class="card-title">
                {{ title }}
            </view>
            <view class="card-notice u-flex">
                <view class="notice-lalbel">注：</view>
                <view class="notice-item u-flex">
                    <view class="block active"></view>
                    <view class="text">已答</view>
                </view>
                <view class="notice-item u-flex">
                    <view class="block"></view>
                    <view class="text">未答</view>
                </view>
            </view>
            <view
                class="card-topic"
                v-for="(topic, index) in topicRulesList"
                :key="index"
            >
                <view class="topic-title">{{ topic.title }}</view>
                <view class="topic-list u-flex u-flex-wrap">
                    <view
                        class="topic-item"
                        :class="[
                            {
                                current: topicId == item.topic_id,
                                active: topicAnswered(item.topic_id),
                            },
                        ]"
                        v-for="item in topic.data"
                        :key="item.topic_id"
                        @click="change(currentTopicIndex(item.topic_id))"
                    >
                        {{ currentTopicIndex(item.topic_id) + 1 }}
                    </view>
                </view>
            </view>
        </view>
    </u-popup>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
    props: {
        /**
         * 显示状态
         */
        value: {
            type: Boolean,
            default: false,
        },
        /**
         * 开始标题
         */
        title: {
            type: String,
            default: "",
        },
    },
    data() {
        return {};
    },
    computed: {
        ...mapState({
            topicIndex: (state) => state.examPractice.topicIndex,
            topicList: (state) => state.examPractice.topicList,
            topicRulesList: (state) => state.examPractice.topicRulesList,
        }),
        ...mapGetters({
            statusBarHeight: "projectSetting/globStatusBarHeight",
            navbarHeight: "projectSetting/globNavbarHeight",

            topicId: "examPractice/getTopicId",
        }),
        windowHeight() {
            return this.$u.sys().windowHeight;
        },
        headerStatusCloseIconStyle() {
            let style = {
                left: "15px",
                top: "15px",
            };
            return style;
        },
        bodyStyle() {
            let style = {};
            style.height =
                this.windowHeight -
                this.statusBarHeight -
                this.navbarHeight +
                "px";
            return style;
        },
    },
    methods: {
        close() {
            this.$emit("input", false);
        },
        change(index) {
            if (index != this.topicIndex) {
                this.close();
                this.$emit("change", index);
            }
        },
        confirm() {
            this.$emit("confirm");
        },
        // 试题的号
        currentTopicIndex(id) {
            let num = this.topicList.findIndex((item) => item.topic_id == id);
            return num;
        },
        // 试题是否已答
        topicAnswered(id) {
            let data = this.topicList.find((item) => item.topic_id == id);
            return data.has_answered;
        },
    },
};
</script>

<style lang="scss" scoped>
.card-header {
    .card-header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #ffffff;
    }
    .card-header-bar {
        width: 100%;
    }
    .card-header-placeholder {
        width: 100%;
    }
}
.card-body {
    margin: 30rpx 0;

    .card-title {
        padding: 0 30rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #303133;
    }

    .card-notice {
        padding: 0 30rpx;
        margin-top: 25rpx;
        .notice-lalbel {
            font-size: 26rpx;
            color: #909399;
        }
        .notice-item {
            margin-right: 30rpx;
            .block {
                width: 28rpx;
                height: 28rpx;
                border-radius: 4rpx;
                border: 1px solid #dcdfe6;
            }
            .text {
                font-size: 26rpx;
                color: #303133;
                margin-left: 10rpx;
            }
            .active {
                @include border-color;
                @include bg-color;
            }
        }
    }
    .card-topic {
        margin-top: 40rpx;
        .topic-title {
            padding: 0 30rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #303133;
        }
        .topic-list {
            padding-left: 30rpx;
        }
        .topic-item {
            width: 72rpx;
            height: 72rpx;
            color: #303133;
            font-size: 28rpx;
            border-radius: 8rpx;
            border-width: 1rpx;
            border-style: solid;
            border-color: #dcdfe6;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30rpx;
            margin-right: 30rpx;
            &.active {
                color: #ffffff;
                @include bg-color;
                @include border-color;
            }
            &.current {
                @include text-color;
                @include border-color;
                @include bg-color-disabled;
            }
        }
    }
}

.card-footer {
    .card-btn {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        .left {
            flex: 1;
        }
        .right {
            flex: 1;
        }
        .btn {
            padding: 0;
            font-size: 30rpx;
            color: #606266;
            font-size: 30rpx;
            height: 88rpx;
            line-height: 88rpx;
            background-color: #ffffff;
        }
        ::v-deep .edu-btn {
            height: 88rpx;
        }
        ::v-deep button {
            border-radius: 0;
        }
        ::v-deep button:after {
            border-radius: 0;
        }
    }
    .card-btn-placeholder {
        height: 88rpx;
    }
}
</style>
